<template>
  <div>
    <el-card>
      <el-row class="mb20">
        <el-button class="mr10" type="primary" @click="showAdd" size="small">新增</el-button>
        <el-input placeholder="请输入名称" clearable v-model="query.name" size="small" suffix-icon="el-icon-search"
          style="width: 250px" @change="getList()" />
      </el-row>

      <!-- 新增弹框 -->
      <el-dialog title="新增" :visible.sync="dialogFormVisible">
        <el-form :model="newForm" :rules="rules" ref="newForm">
          <el-form-item label="唯一标识" prop="associationTypeUniqueIdentification" label-width="110px">
            <el-input v-model="newForm.associationTypeUniqueIdentification" autocomplete="off"
              placeholder="英文字符建议尽可能简短可识别，作为该关联类型的唯一标识使用"></el-input>
          </el-form-item>
          <el-form-item label="关联类型名称" prop="name" label-width="110px">
            <el-input v-model="newForm.name" autocomplete="off" placeholder="请输入名称"></el-input>
          </el-form-item>
          <el-form-item label="源-目标描述" prop="sourceToDest" label-width="110px">

            <el-input v-model="newForm.sourceToDest" placeholder="在源实例查看关系的时候，显示的描述"></el-input>

          </el-form-item>
          <el-form-item label="目标-源描述" prop="destToSource" label-width="110px">
            <el-input v-model="newForm.destToSource" placeholder="在目标实例查看关系的时候，显示的描述"></el-input>

          </el-form-item>
          <el-form-item label="方向" label-width="110px">
            <el-select v-model="newForm.direction" filterable placeholder="视图中是否显示方向，默认为源指向目标" style="width: 400px;">
              <el-option label="源-目标" value=0></el-option>
              <el-option label="无方向" value=1></el-option>
              <el-option label="双向" value=2></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="是否内置" label-width="110px">
            <el-radio-group v-model="newForm.IsBuildIn">
              <el-radio :label="0">否</el-radio>
              <el-radio :label="1">是</el-radio>
            </el-radio-group>
          </el-form-item> -->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="AddAssociationType('newForm')">确 定</el-button>
          <el-button @click="dialogFormVisible = false">取 消</el-button>
        </div>
      </el-dialog>


      <!-- 编辑弹框 -->
      <el-dialog title="编辑" :visible.sync="dialog">
        <el-form :model="editForm" :rules="rules" ref="editForm">
          <el-form-item label="唯一ID" prop="modelAssociationTypeId" label-width="110px">
            <el-input v-model="editForm.modelAssociationTypeId" autocomplete="off" disabled></el-input>
          </el-form-item>
          <el-form-item label="唯一标识" prop="associationTypeUniqueIdentification" label-width="110px">
            <el-input v-model="editForm.associationTypeUniqueIdentification" autocomplete="off"
              placeholder="英文字符建议尽可能简短可识别，作为该关联类型的唯一标识使用"></el-input>
          </el-form-item>
          <el-form-item label="关联类型名称" prop="name" label-width="110px">
            <el-input v-model="editForm.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="源-目标描述" prop="sourceToDest" label-width="110px">
            <el-input v-model="editForm.sourceToDest" placeholder="在源实例查看关系的时候，显示的描述"></el-input>
          </el-form-item>
          <el-form-item label="目标-源描述" prop="destToSource" label-width="110px">
            <el-input v-model="editForm.destToSource" placeholder="在目标实例查看关系的时候，显示的描述"></el-input>
          </el-form-item>
          <el-form-item label="方向" label-width="110px">
            <el-select v-model="editForm.direction" placeholder="视图中是否显示方向，默认为源指向目标" style="width: 400px;">
              <el-option label="源-目标" value=0></el-option>
              <el-option label="无方向" value=1></el-option>
              <el-option label="双向" value=2></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="是否内置" label-width="110px" prop="IsBuildIn">
            <el-radio-group v-model="editForm.IsBuildIn">
              <el-radio :label="0">否</el-radio>
              <el-radio :label="1">是</el-radio>
            </el-radio-group>
          </el-form-item> -->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="EditAssociationType('editForm')">
            确定</el-button>
          <el-button @click="dialog = false">取 消</el-button>

        </div>
      </el-dialog>

      <!-- 列表 -->
      <el-row>
        <el-table :data="tableData" style="width: 100%" height="calc(100vh - 250px)"
          :default-sort="{ prop: 'date', order: 'descending' }" v-loading="loading">
          <el-table-column prop="associationTypeUniqueIdentification" align="center" label="唯一标识" sortable>
          </el-table-column>
          <el-table-column prop="name" label="关联类型名称" align="center" sortable> </el-table-column>
          <el-table-column prop="sourceToDest" label="源-目标描述" align="center" sortable>
          </el-table-column>
          <el-table-column prop="destToSource" label="目标-源描述" align="center" sortable>
          </el-table-column>
          <el-table-column prop="direction" label="方向" align="center" ortable>
            <template slot-scope="scope">
              <el-tag type="success"> {{ scope.row.direction == 0 ? '源-目标' : scope.row.direction == 1 ? '无方向' :
                scope.row.direction == 2 ?
                  '双向' : '未知' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button style="margin-right: 20px" size="mini" type="primary"
                @click="showEdit(scope.$index, scope.row)">编辑</el-button>

              <el-button @click="DelAssociationType(scope.$index, scope.row)" size="mini" type="danger">删除</el-button>

            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <pagination v-show="total > 0" :total="total" :page.sync="query.pageNum" :limit.sync="query.pageSize"
        :select-data-len="multipleSelection.length" @pagination="getList()" />
    </el-card>
  </div>
</template>

<script>
import {
  getDelAssociationType_Api,
  getAddAssociationType_Api,
  getEditAssociationType_Api,
  getAssociationTypeList_Api,
} from "@/api/configuration/model";
export default {
  data() {
    return {
      sourceOptions: [{
        value: '属于',
        label: '属于'
      }, {
        value: '组成',
        label: '组成'
      }, {
        value: '运行',
        label: '运行'
      }, {
        value: '上联',
        label: '上联'
      }],
      destOptions: [{
        value: '包含',
        label: '包含'
      }, {
        value: '组成于',
        label: '组成于'
      }, {
        value: '运行于',
        label: '运行于'
      }, {
        value: '下联',
        label: '下联'
      }],
      loading: false,
      dialogFormVisible: false,//新增显示隐藏
      //新增数据
      newForm: {
        //唯一标识
        associationTypeUniqueIdentification: "",
        //关联类型名称
        name: "",
        //源-目标描述
        sourceToDest: "",
        //目标-源描述
        destToSource: "",
        //方向
        direction: null,
        //是否内置
        // IsBuildIn: null,
      },
      dialog: false,//编辑显示隐藏
      //编辑数据
      editForm: {
        modelAssociationTypeId: "", //唯一id
        associationTypeUniqueIdentification: "", //唯一标识
        name: "", //关联类型名称
        sourceToDest: "", //源-目标描述
        destToSource: "", //目标-源描述
        direction: null,//方向
        //是否内置
        // IsBuildIn: null,
      },
      total: 20,
      //分页数据
      query: {
        pageNum: 1,
        pageSize: 10,
        name: ""
      },
      multipleSelection: [],
      //搜索数据
      search: "",
      //请求列表数据
      tableData: [],
      //验证规则
      rules: {
        associationTypeUniqueIdentification: {
          required: true,
          message: "请输入唯一标识",
          trigger: "blur",
        },
        name: { required: true, message: "请输入名称", trigger: "blur" },
        sourceToDest: {
          required: true,
          message: "请输入源-目标描述",
          trigger: "blur",
        },
        destToSource: {
          required: true,
          message: "请输入活目标-源描述",
          trigger: "blur",
        },
        IsBuildIn: {
          required: false, message: "请选择是否内置", trigger: "blur"
        },
      },
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      this.loading = true;
      let res = await getAssociationTypeList_Api(this.query);
      let { total, rows, code } = res;
      if (code == 200) {
        this.total = total;
        this.tableData = rows;
        this.loading = false;
      }
    },
    //展示编辑弹框
    showEdit(index, row) {
      console.log(row);
      this.dialog = true;
      this.editForm = row;
      this.editForm.IsBuildIn = 1;
    },
    //编辑关联类型
    EditAssociationType(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let res = await getEditAssociationType_Api(this.editForm);
          let { code, msg } = res;
          if (code == 200) {
            this.$message.success(msg);
            this.getList();
            this.dialog = false;
          } else {
            this.$message.error(msg);
          }
        } else {
          return false;
        }
      });
    },
    //展示新增弹框
    showAdd() {
      this.dialogFormVisible = true
      this.newForm = {
        //唯一标识
        associationTypeUniqueIdentification: "",
        //关联类型名称
        name: "",
        //源-目标描述
        sourceToDest: "",
        //目标-源描述
        destToSource: "",
        //方向
        direction: null,
        //是否内置
        // IsBuildIn: null,
      };
    },
    //新增关联类型
    AddAssociationType(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let res = await getAddAssociationType_Api(this.newForm);
          let { code, msg } = res;
          if (code == 200) {
            this.$message.success(msg);
            this.dialogFormVisible = false;
            this.getList();
          } else {
            this.$message.error(msg);
          }
        } else {
          return false;
        }
      });
    },
    //删除
    DelAssociationType(index, row) {
      this.$confirm('此操作将永久删除该关联类型, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await getDelAssociationType_Api(row.modelAssociationTypeId);
        let { code, msg } = res;
        if (code == 200) {
          this.$message.success(msg);
          this.getList();
        } else {
          this.$message.error(msg);
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  },
};
</script>

<style lang="scss" scoped></style>
